<template>
  <div class="sms-config">
    <h2 class="page-title">短信配置</h2>

    <!-- 操作提示 -->
    <div class="tips-box">
      <div class="tips-content">
        <p>设置短信签名、开发模版前请要审核。</p>
        <p>审核时间：周一至周日9:30-22:00（法定节假日顺延），工作日预计2小时，非工作日预计4小时。</p>
        <p>短信数量不足时，请进行短信充值；如有疑问，请联系客服，客服热线：400-202-2021。</p>
      </div>
    </div>

    <!-- 短信賬戶 -->
    <div class="account-section">
      <h3 class="section-title">短信账户</h3>
      <div class="account-info">
        <div class="info-row">
          <div class="info-item">
            <span class="label">用戶名：</span>
            <span class="value">StoneFang</span>
            <el-link type="primary" class="action-link">切换账户</el-link>
          </div>
          <div class="info-item">
            <span class="label">公司名称：</span>
            <span class="value">鹏博运输公司</span>
          </div>
          <div class="info-item">
            <span class="label">账户</span>
            <span class="value status-normal">正常</span>
          </div>
        </div>
        <div class="info-row">
          <div class="info-item">
            <span class="label">手机号：</span>
            <span class="value">15270371111</span>
            <el-link type="primary" class="action-link">更换手机号</el-link>
          </div>
          <div class="info-item">
            <span class="label">签名：</span>
            <span class="value">鹏博运输</span>
            <el-link type="primary" class="action-link">更换签名</el-link>
          </div>
        </div>
      </div>
    </div>

    <!-- 短信權限 -->
    <div class="permission-section">
      <h3 class="section-title">短信充值</h3>
      <div class="permission-content">
        <div class="permission-item">
          <span class="label">是否开放：</span>
          <el-switch v-model="smsEnabled" />
        </div>
        <div class="permission-item">
          <span class="sub-label">是否开放短信通知</span>
        </div>
      </div>
    </div>

    <!-- 短信餘額 -->
    <div class="balance-section">
      <h3 class="section-title">短信余额</h3>
      <div class="balance-content">
        <div class="balance-info">
          <span class="label">短信：</span>
          <span class="value highlight">10598</span>
          <span class="unit">条</span>
        </div>
        <el-button type="primary" class="recharge-btn" @click="handleRecharge">
          短信充值
        </el-button>
      </div>
    </div>

    <!-- 模版列表 -->
    <div class="template-section">
      <div class="template-tabs">
        <el-tabs v-model="activeTab">
          <el-tab-pane label="短信模版" name="smsTemplate">
            <el-table :data="templateList" border style="width: 100%">
              <el-table-column prop="templateId" label="模版ID" width="120" />
              <el-table-column prop="templateName" label="模版名稱" width="180" />
              <el-table-column prop="templateType" label="模版類型" width="120" />
              <el-table-column prop="templateContent" label="模版內容" />
              <el-table-column label="狀態" width="100">
                <template #default="scope">
                  <el-switch v-model="scope.row.enabled" />
                </template>
              </el-table-column>
              <el-table-column prop="auditStatus" label="審核狀態" width="120" />
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="充值记录" name="rechargeRecord">
            <el-table :data="rechargeList" border style="width: 100%">
              <el-table-column prop="orderId" label="订单编号" width="180" />
              <el-table-column prop="smsPackage" label="短信套餐" width="120" />
              <el-table-column prop="smsCount" label="短信条数" width="120" />
              <el-table-column prop="orderAmount" label="订单总价" width="120" />
              <el-table-column prop="payAmount" label="支付金额" width="120" />
              <el-table-column prop="orderStatus" label="订单状态" width="120" />
              <el-table-column prop="payTime" label="付款时间" width="180" />
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="发送记录" name="sendRecord">
            <el-table :data="sendList" border style="width: 100%">
              <el-table-column prop="templateName" label="标题名称" width="180" />
              <el-table-column prop="phoneNumber" label="接收人账号" width="120" />
              <el-table-column prop="createTime" label="创建时间" width="180" />
              <el-table-column prop="sendTime" label="发送时间" width="180" />
              <el-table-column prop="sendStatus" label="发送状态" width="120" />
              <el-table-column prop="result" label="返回结果" width="120" />
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </div>

      <!-- 分頁 -->
      <div class="pagination-container">
        <div class="pagination-info">共 50 條</div>
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 30, 50]"
          :total="50"
          layout="sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
        <div class="pagination-goto">
          <span>前往</span>
          <el-input v-model="goToPage" class="goto-input" />
          <span>頁</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

/**
 * 此页面对应系统管理下的 短信配置
 */


// 開關狀態
const smsEnabled = ref(true)

// 分頁相關
const currentPage = ref(1)
const pageSize = ref(10)
const goToPage = ref('')

// 標籤頁
const activeTab = ref('smsTemplate')

// 模版列表數據
const templateList = ref([
  {
    templateId: '15792',
    templateName: '配送任務領取',
    templateType: '通知',
    templateContent: '您有一個新的特配送任務。任務內容：{renwu_name}，請及時前往APP查看！',
    enabled: true,
    auditStatus: '審核通過'
  },
  {
    templateId: '15792',
    templateName: '待配載打單提醒',
    templateType: '通知',
    templateContent: '您有一個新的特配送任務。任務內容：{renwu_name}，請及時前往APP查看！',
    enabled: true,
    auditStatus: '審核通過'
  },
  {
    templateId: '15792',
    templateName: '貨物簽收提醒',
    templateType: '通知',
    templateContent: '您有一個新的特配送任務。任務內容：{renwu_name}，請及時前往APP查看！',
    enabled: true,
    auditStatus: '審核通過'
  }
])

// 充值記錄數據
const rechargeList = ref([
  {
    orderId: '202505271606001',
    smsPackage: '30元套餐',
    smsCount: '500',
    orderAmount: '30.00',
    payAmount: '30.00',
    orderStatus: '已关闭',
    payTime: '2025/05/27 16:06:03'
  },
  {
    orderId: '202505271606001',
    smsPackage: '30元套餐',
    smsCount: '500',
    orderAmount: '30.00',
    payAmount: '30.00',
    orderStatus: '已关闭',
    payTime: '2025/05/27 16:06:03'
  },
  {
    orderId: '202505271606001',
    smsPackage: '30元套餐',
    smsCount: '500',
    orderAmount: '30.00',
    payAmount: '30.00',
    orderStatus: '已关闭',
    payTime: '2025/05/27 16:06:03'
  }
])

// 發送記錄數據
const sendList = ref([
  {
    templateName: '配送任务领取通知',
    phoneNumber: '15270371111',
    createTime: '2025/06/01 18:02:20',
    sendTime: '2025/06/01 18:02:20',
    sendStatus: '已发送',
    result: '成功'
  },
  {
    templateName: '配送任务领取通知',
    phoneNumber: '15270371111',
    createTime: '2025/06/01 18:02:20',
    sendTime: '2025/06/01 18:02:20',
    sendStatus: '已发送',
    result: '成功'
  },
  {
    templateName: '配送任务领取通知',
    phoneNumber: '15270371111',
    createTime: '2025/06/01 18:02:20',
    sendTime: '2025/06/01 18:02:20',
    sendStatus: '已发送',
    result: '成功'
  }
])

// 分頁大小改變
const handleSizeChange = (val: number) => {
  pageSize.value = val
}

// 當前頁改變
const handleCurrentChange = (val: number) => {
  currentPage.value = val
}

// 充值按鈕點擊
const handleRecharge = () => {
  // 實現充值邏輯
}
</script>

<style scoped>
.sms-config {
  padding: 20px;
  background-color: #fff;
}

.page-title {
  font-size: 20px;
  font-weight: 500;
  color: #303133;
  margin-bottom: 20px;
}

.tips-box {
  background-color: #fff9e6;
  border: 1px solid #ffe6a6;
  padding: 16px;
  margin-bottom: 20px;
  border-radius: 4px;
}

.tips-content {
  color: #666;
  font-size: 14px;
  line-height: 1.8;
}

.section-title {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
  margin-bottom: 16px;
}

.account-section,
.permission-section,
.balance-section,
.template-section {
  margin-bottom: 24px;
}

.account-info {
  background-color: #f5f7fa;
  padding: 16px;
  border-radius: 4px;
}

.info-row {
  display: flex;
  margin-bottom: 16px;
}

.info-row:last-child {
  margin-bottom: 0;
}

.info-item {
  display: flex;
  align-items: center;
  margin-right: 48px;
}

.label,
.sub-label {
  color: #606266;
  margin-right: 8px;
}

.value {
  color: #303133;
}

.action-link {
  margin-left: 16px;
}

.status-normal {
  color: #67c23a;
}

.permission-content,
.balance-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.balance-info {
  display: flex;
  align-items: center;
}

.highlight {
  color: #4066ff;
  font-size: 16px;
  font-weight: 500;
  margin: 0 4px;
}

.unit {
  color: #606266;
}

.recharge-btn {
  margin-left: 16px;
}

.template-tabs {
  margin-bottom: 20px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pagination-info {
  color: #606266;
}

.pagination-goto {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #606266;
}

.goto-input {
  width: 50px;
  margin: 0 8px;
}

:deep(.el-button--primary) {
  --el-button-bg-color: #4066FF;
  --el-button-border-color: #4066FF;
  --el-button-hover-bg-color: #5C7CFF;
  --el-button-hover-border-color: #5C7CFF;
}

:deep(.el-switch.is-checked .el-switch__core) {
  background-color: #4066FF;
  border-color: #4066FF;
}

:deep(.el-tabs__item.is-active) {
  color: #4066FF;
}

:deep(.el-tabs__active-bar) {
  background-color: #4066FF;
}
</style>
